<template>
	<view>
		<z-nav-bar title="导入问题"></z-nav-bar>
		<view class="content">
			<view class="z-font-32 text-w">
				<text>已选问题</text>
				<text class="uni-orange">{{ selList.length }}</text>
				<text>个</text>
			</view>
			<view class="item-box flex_fsc flex_wrap">
				<view v-for="item in selList" :key="item.id" class="item">
					<view>{{ item.name }}</view>
					<image
						:src="setting.oss_pub_domain + '/app-img/icon/close-main-grey.png'"
						class="icon-size-32 close-icon"
						@click="deleteItem(index)"
					></image>
				</view>
			</view>
			<view class="flex_fsc uni-mt-40">
				<view class="z-font-32 text-w">选择问题</view>
			</view>
			<view class="search-box flex_fsc">
				<uni-icons type="search" size="20" color="#333" class="uni-mr-16"></uni-icons>
				<input
					v-model="name"
					type="text"
					:placeholder="`输入问题关键词搜索`"
					placeholder-class="uni-placeholder"
					@confirm="fetchData(1)"
					confirm-type="search"
				/>
			</view>
			<view class="plan-list">
				<view
					v-for="(element, index) in list"
					:key="index"
					class="plan-box"
					:class="[selList.findIndex((item) => item.id === element.id)] >= 0 ? 'active' : 'unactivated'"
					@click="setItem(element)"
				>
					<view class="flex_sbc">
						<view class="z-font-32">{{ element.name }}</view>
						<image :src="setting.oss_pub_domain + '/app-img/icon/icon-empty-add.png'" class="icon-size-32"></image>
					</view>
					<view class="z-font-24 uni-color-grey uni-mt-12">{{ element.description }}</view>
				</view>
				<z-no-data v-if="!list.length"></z-no-data>
			</view>
		</view>
		<bottom-box :buts="buts" @change="confirm"></bottom-box>
	</view>
</template>

<script setup>
import { getQuestionList } from '@/api/question.js';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance();
const eventChannel = that.getOpenerEventChannel();

const list = ref([]),
	total = ref(0),
	name = ref(''),
	pageNum = ref(1)

fetchData();

function fetchData() {
	const params = { pageNum: pageNum.value, name: name.value, pageSize: 10, course: 1 }
	getQuestionList(params).then((res) => {
		if (pageNum.value === 1) list.value = res.rows;
		else list.value.push(...res.rows);
		total.value = res.total;
	});
}

onReachBottom(() => {
	if (list.value.length >= total.value) return;
	pageNum.value += 1;
	fetchData();
});

const selList = reactive([]);
function setItem(item) {
	const fIndex = selList.findIndex((el) => el.id === item.id);
	if (fIndex >= 0) selList.splice(fIndex, 1);
	else selList.push(item);
}
function deleteItem(index) {
	selList.splice(index, 1);
}

const buts = [
	{
		label: '确定',
		bgColor: 'uni-color-main-bg'
	}
];

function confirm() {
	if (!selList.length) return that.tools.alert('请选择问题')
	eventChannel.emit('selObj', selList);
	uni.navigateBack();
}
</script>

<style lang="scss">
@import '../../player/add/item-scheme/item-scheme.scss';
</style>
